
<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<title>dz3－snap vertical</title>
	<script src="openseadragon.js"></script>
    <link rel="stylesheet"  href="css/lightslider.css"/>
   <style>
   	ul{
		list-style: none outside none;
	    padding-left: 0;
           margin: 0;
           white-space: nowrap;
	}
	ul:focus {
	    outline:solid 1px green;
	}
	
	li img{
		 display: inline-block;
	    border: 1px solid #CCCCCC;
	    border-radius: 5px 5px 5px 5px; /* optional */
	    
	    background-color: #F9F9F9;
	    background-position: center center;
	    background-repeat: no-repeat;
	}
	textarea{
		font-size: 11pt;
		font-family: Tahoma, Arial; 
		background-color: #FCFCEF;
		border: #CCCCCC 1px solid;
		padding: 3px;
	}
		
	#cropSliderWrap{
		position: absolute;
		z-index: 11;
		width: 135px; 
		right: 0px; 
		top: 5px;
		height: 100%;
	}

	#content-slider{
		width: 130px; 
		background-color: #FFFFFF;
		overflow: hidden;
	}
		
		
    </style>
    <script src="js/jquery1.9.1.min.js"></script>
    <script src="js/lightslider.js"></script> 

</head>
<body>

<div id="player1" style="width: 950px;height: 800px;position: relative;">
<div id="openseadragon1"></div>


<div id="cropSliderWrap"  class="demo">
    <ul id="content-slider" class="gallery list-unstyled clearfix">
    </ul>
</div>
</div>
<br>
<button type="button" id="btn_delete">Delete</button>
<button type="button" id="btn_tojson">toJSon</button>
<button type="button" id="btn_fromjson">fromJSon</button>

 <span id="snap_pos">level</span>

<textarea id="ta_info" style="width: 90%; height: 150px">
</textarea>

<canvas id="clip_canvas" width="128" height="128" style="display:none;"></canvas>
<script type="text/javascript">
$(document).ready(function() {
	var sw=150;
	var wh = Math.min( $( window ).height()-20,$( window ).width() -sw);
	$('#player1').width(wh+sw).height(wh);
	$('#openseadragon1').width(wh).height(wh);
	$('#content-slider').width(sw)
	
	var item_cout = Math.floor(wh/140);

	var viewer = init_viewer();	
	var slider = viewer.slider({
		el:"#content-slider",
        loop:false,
        keyPress:true,
        item:item_cout,
        vertical:true,
       verticalHeight:wh,
       slideMargin:5,
       adaptiveHeight:true,
       pager:false
    });

	//output all snap to json
	var btn_tojson = document.getElementById('btn_tojson');
	btn_tojson.onclick=function(){
		var e_ul = document.getElementById("content-slider");
		e_ul.img_editing=null;
		var clds = e_ul.childNodes;
		var snap_info=[];
		for(var i=0; i<clds.length; i++){
			var cld = clds[i];
			if(cld.tagName != 'LI')
				continue;
			var img = cld.childNodes[0];
			snap_info[snap_info.length]={
				page:img.page,
				bounds:img.bounds
			}
		}
		var ta = document.getElementById("ta_info");
		ta.value = JSON.stringify(snap_info);
	}
	
	var btn_fromjson = document.getElementById('btn_fromjson');
	btn_fromjson.onclick=function(){
		var ta = document.getElementById("ta_info");
		var snap_info = JSON.parse(ta.value);
		var e_ul = document.getElementById("content-slider");
 		while (e_ul.hasChildNodes()) {   
 			e_ul.removeChild(e_ul.firstChild);
 		}	
 		viewer.loadSnap(snap_info);
	}
	
});
function getUrlVars(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function init_viewer(){
	var pval = getUrlVars();
	var pic_len =pval['len']||72;
	var pic_path = pval['pic']||'pic/MB5083_256/MB5083';
	var snap_path = pic_path+'.json';
	
	var ts=[];
	for(var i=1; i<=pic_len; i++){
		if(i<10)
			ts[ts.length]=pic_path+"_0"+i+".xml";
		else
			ts[ts.length]=pic_path+"_"+i+".xml";
	}
   var viewer = OpenSeadragon({
        // debugMode: true,
        id: "openseadragon1",  //容器id
        prefixUrl: "images/", //openseadragon插件资源路径
        tileSources: ts,  //openseadragon 图片资源xml
        sequenceMode: true,
        preserveViewport: true,  
        preserveOverlays:true,
        blendTime:0,
        //preserveOverlays:true,
        //debugMode:  true,
        //useCanvas:false,
        //opacity:0.5,
       //immediateRender:true,
        maxImageCacheCount:5000,
        navPrevNextWrap:true,
        //alwaysBlend:true,
        //showRotationControl:true,
        show360Control:true,
        showSnapControl:true,
        //b360:true,
        showNavigator:true  //是否显示控制按钮
    });
   
   viewer.addHandler('open',function(args){
	   if(viewer.snaploaded)
		   return;
	   var jqxhr = $.getJSON(snap_path, function(data) {
		   //console.log( "success" );
		 })
	   .done(function(snap_info) {
	     //console.log( "second success" );
			var e_ul = document.getElementById("content-slider");
	 		while (e_ul.hasChildNodes()) {   
	 			e_ul.removeChild(e_ul.firstChild);
	 		}	
	 		viewer.loadSnap(snap_info);

	   })
	   .fail(function() {
	     console.log( "error" );
	   }).always(function() {
		   viewer.snaploaded=true;
	   });;
   });
   return viewer;
}
</script>
</body> 